<script setup>
import { ref } from 'vue'
// 轮播图相关数据
const bannerDialogVisible = ref(false)
const bannerForm = ref({
    title: '',
    imageUrl: '',
    link: ''
})
const banners = ref([
    { id: 1, title: '春季大促', imageUrl: 'https://example.com/banner1.jpg', link: 'https://example.com' }
])
const showBannerDialog = () => {
    bannerDialogVisible.value = true
}
const handleBannerSubmit = () => {
    // 这里添加提交逻辑
    bannerDialogVisible.value = false
}
</script>
<template>
    <el-card class="management-container">
        <template #header>
            <div class="header-wrapper">
                <span class="header-title">轮播图管理</span>
                <div class="action-buttons">
                    <el-button type="primary" @click="showBannerDialog">
                        新增轮播图
                    </el-button>
                </div>
            </div>
        </template>
        <el-table :data="banners" border>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="imageUrl" label="图片链接" />
            <el-table-column prop="link" label="跳转链接" />
            <el-table-column label="操作" width="150">
                <template #default>
                    <el-button size="small">编辑</el-button>
                    <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消" @confirm="confirm">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 轮播图对话框 -->
    <el-dialog v-model="bannerDialogVisible" title="轮播图信息">
        <el-form :model="bannerForm" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="bannerForm.title" />
            </el-form-item>
            <el-form-item label="图片链接">
                <el-input v-model="bannerForm.imageUrl" />
            </el-form-item>
            <el-form-item label="跳转链接">
                <el-input v-model="bannerForm.link" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="bannerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleBannerSubmit">确认</el-button>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.management-container {
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .header-title {
            font-size: 18px;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }
    }

    .el-table {
        margin-top: 20px;
    }
}
</style>